@import "../../style/public";

.employeeManage {
    .role-green {
        background-color: #1EC36B;
    }

    .role-red {
        background-color: #EE3A31;
    }

    .role-blue {
        background-color: #459DFF;
    }

    .role-orange {
        background-color: #FD8217;
    }

    .role-purple {
        background-color: #7F6BE9;
    }

    .role-deepblue {
        background-color: #3352E0;
    }

    .page-infinite-loading {
        text-align: center;
        @include remCalc(margin-top, 20);
        @include remCalc(height, 80);
        @include remCalc(line-height, 80);
        @include remCalc(font-size, 14);
    }
    .filter-icon {
        @include remCalc(font-size, 38);
        @include remCalc(padding-left, 20);
        color: #333333;
    }

    .blue {
        color: #459dff;
    }

    .search-wrap {
        @include remCalc(margin-top, 30);
    }

    .section {
        overflow: scroll;
        position: relative;
    }
    .no-more {
        text-align: center;
        color: #999;
        @include remCalc(font-size, 24);
        @include remCalc(padding-top, 30);
    }

    .list {

        // @include remCalc(margin-bottom, 30);
        // @include remCalc(padding-left, 30);
        li {
            @extend %flex;
            width: pw(355);
            height: pw(74);
            background: #fff;
            // border-bottom: 1px solid $color-border;
            // @include remCalc(padding-top, 30);
            // @include remCalc(padding-bottom, 30);
            margin-top: pw(10);
            margin-left: pw(10);
            border-radius: pw(10);

            .icon {
                text-align: center;
                width: pw(44);
                height: pw(44);
                @include remCalc(line-height, 80);
                @include remCalc(font-size, 22);
                border-radius: 50%;
                color: #ffffff;
                margin-left: pw(20);
                margin-top: pw(15);
            }

            .info {
                @include remCalc(padding-left, 20);
                @extend %flex-item;

                .name {


                    @include remCalc(margin-bottom, 8);
                    color: #333333;
                    font-family: PingFang SC;
                    font-size: pw(16);
                    font-weight: 500;
                    line-height: pw(22);
                    letter-spacing: 0px;
                    text-align: left;
                    margin-top: pw(16);
                }

                .store {
                    // @include remCalc(font-size, 26);
                    // @include remCalc(line-height, 26);

                    color: rgba(153, 153, 153, 1);

                    font-family: PingFang SC;
                    font-size: pw(12);
                    font-weight: 400;
                    line-height: pw(17);
                    letter-spacing: 0px;
                    text-align: left;

                }
            }

            .leave {
                .name {
                    color: #cccccc;
                }

                .store {
                    color: #cccccc;
                }

            }
        }

        li:last-child {
            border: 0;
        }
    }
}

.no-more {
    color: #ddd;
    @include remCalc(font-size, 26);
    text-align: center;
    @include remCalc(line-height, 40);
    @include remCalc(padding-bottom, 20);
    position: relative;

    span {
        position: relative;
    }

    span:before {
        content: '';
        position: absolute;
        height: 1px;
        background: #ddd;
        @include remCalc(width, 20);
        @include remCalc(top, 10);
        @include remCalc(left, -30);
    }
    span:after {
        content: '';
        position: absolute;
        height: 1px;
        background: #ddd;
        @include remCalc(width, 20);
        @include remCalc(top, 14);
        @include remCalc(right, -30);
    }
}

.add-employee {
    .page-body {
        .sub-text {
            @include remCalc(font-size, 24);
            @include remCalc(padding-top, 10);
            color: #999;
            display: block;
        }

        .mine-options {
            margin-top: pw(10);
            background: #fff;
            // @include thin-border(true, false);
            width: pw(355);
            // height: pw(159);
            margin-left: pw(10);
            border-radius: pw(10);

            .option-item {
                display: flex;
                width: pw(355);
                height: pw(38);
                @extend %box-sizing;
                // margin-top: pw(10);

                @include thin-border(false, false, top);

                &:first-child {
                    &::after {
                        display: none;
                    }
                }

                .left {
                    @include remCalc(font-size, 30);
                    color: #333333;
                    position: relative;
                    margin-top: pw(10);
                    margin-left: pw(10);
                }

                .new:after {
                    content: '';
                    position: absolute;
                    background: url(../../assets/images/new.png) 0 0 no-repeat;
                    background-size: contain;
                    @include remCalc(width, 100);
                    @include remCalc(height, 34);
                    @include remCalc(margin-top, 4);
                    @include remCalc(margin-left, 10);
                    @include remCalc(top, 0);
                }

                .right {
                    text-align: right;
                    display: flex;
                    flex: 1;
                    align-items: center;
                    justify-content: flex-end;
                    @include remCalc(font-size, 28);
                    @include remCalc(padding-right, 30);
                    .value {
                        //@include remCalc(line-height, 40);
                        //line-height:1.2;
                        color: #7e7e7e;
                    }
                    >input.value {
                        text-align: right;
                        @include remCalc(width, 380);
                    }

                    .get-code-input.value {
                        @include remCalc(max-width, 200);
                    }

                    .get-code {
                        color: $color-red;
                        float: right;
                        @include remCalc(padding-left, 30);
                        @include remCalc(margin-left, 30);
                        border-left: 1px solid $color-border;
                    }
                    .get-code.disabled {
                        color: #ccc !important;
                        background: #fff !important;
                        opacity: 1 !important;
                    }
                    .right-icon {
                        float: right;
                        color: #c7c7cc;
                    }
                }
            }
            .option-item:last-child {
                border-bottom: none;
            }
        }

        .btn-wrap {
            @include remCalc(margin-top, 60);

            .btn {
                width: pw(355);

            }
        }
    }
}

.employeeManage-filterItem {
    width: 100%;
    height: 100%;

    .section {
        @include remCalc(padding, 0, 30);
        color: #333;

        .title {
            font-family: PingFang SC;

            font-weight: 500;
            line-height: pw(22);
            letter-spacing: 0px;
            text-align: left;

            @include remCalc(font-size, 32);
            @include remCalc(padding, 40, 0, 28, 0);
        }

        .picker-val {
            @include remCalc(font-size, 28);
            background: #f6f6f6;
            border: 1px solid #eeeeee;
            border-radius: pw(18);
            @include remCalc(padding, 0, 20);
            // @include remCalc(height, 80);
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;

            justify-content: space-between;
            width: pw(270);
            height: pw(36);



            i {
                color: #ccc;
            }

            span {
                font-family: PingFang SC;
                font-size: pw(14);
                font-weight: 400;
                line-height: pw(14);
                letter-spacing: 0px;
                text-align: left;

            }
        }

        .check-list {
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;

            li {
                text-align: center;
                //@include remCalc(padding, 0, 76);
                width: pw(84);
                height: pw(36);
                @include remCalc(line-height, 70);
                
                @include remCalc(margin-bottom, 20);
                color: #333;
                background: #f6f6f6;
                border: 1px solid #eeeeee;
                border-radius: pw(18);
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                font-family: PingFang SC;
                font-size: pw(14);
                font-weight: 400;
               
                letter-spacing: 0px;
               

                i {
                    color: #fff;
                    position: absolute;
                    @include remCalc(font-size, 16);
                    @include remCalc(right, 6);
                    @include remCalc(bottom, 2);
                    display: none;
                }

                &.checked {
               
             
                    // border: 1px solid transparent;
                    color: rgba(255, 33, 26, 1);
                    background-color:  rgba(255, 237, 237, 1);
                    border: pw(0.5) solid rgba(255, 33, 26, 1);
                    i {
                        display: block;
                    }

                    // &::before {
                    //     position: absolute;
                    //     content: "";
                    //     display: block;
                    //     @include remCalc(width, 100);
                    //     @include remCalc(height, 40);
                    //     @include remCalc(right, -26);
                    //     @include remCalc(bottom, -20);
                    //     background: #459dff;
                    //     transform: rotate(-218deg);
                    // }
                }
            }
        }
    }

    .section.has-right {
        @include remCalc(padding, 0, 0, 0, 30);

        .check-list {
            display: flex;
            flex-flow: wrap;
            justify-content: left;
            li {
                @include remCalc(margin-right, 26);
            }
        }
    }

    .btn-wrapa {
        position: fixed;
        bottom:pw(44);
        left: pw(20);
        width: pw(270);
        display: flex;

        box-sizing: border-box;
       
        border-radius: pw(10);
        border: pw(1) solid rgba(255, 33, 26, 1);
        // padding: 0;
        //box-shadow: 0 -2px 8px 0 #cccccc;
        @include thin-border(true, true);
      
        >div {
            flex: 1;
            @include remCalc(font-size, 36);
            @include remCalc(height, 88);
            @include remCalc(line-height, 88);
      
            text-align: center;

            &+div {
                width: pw(135);
                background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);

                border-radius: pw(10);
                color: #fff;

                &::before {
                    border-color: #459dff;
                }

                &::after {
                    border-color: #459dff;
                }
            }
            border-radius: pw(10);
            background: #fff;
            color: red;
        }
    }
}

.btn-wraps {
    width: pw(355);
    @include remCalc(padding, 0, 20);

    .btn {
        width: pw(355);
        display: block;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        background: $color-red;
        @include remCalc(margin-top, 60);
        @include remCalc(height, 88);
        @include remCalc(line-height, 88);
        @include remCalc(border-radius, 8);
        @include remCalc(font-size, 36);

        &.disabled {
            color: #fff !important;
            background: #ccc !important;
        }

        &.cancel {
            border: 1px solid #eaeaed;
            color: #7f7f7f !important;
            background: #fff !important;
        }
    }
}
.dbott{
    width: pw(355);
    margin-left: pw(10);
    margin-top: pw(20);
    text-align: center;

    img{
        width: pw(16);
        height: pw(16);
    }
    p{
        font-family: PingFang SC;
font-size: pw(14);
font-weight: 500;
line-height: pw(18);
letter-spacing: 0px;
text-align: center;

    }

}
.hong{
    width: pw(355);
    height: pw(44);
    border-radius: pw(10);
    background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);
    text-align: center;
    line-height: pw(44);
    border: 0.01px solid  red;
    font-family: PingFang SC;
font-size: pw(16);
font-weight: 500;
color: rgba(255, 255, 255, 1);

letter-spacing: 0px;
text-align: center;
margin-left: pw(10);

}
